<template>
  <view class="wh_750 pageHeight bg_FFFFFF flex align-center flex-column">
    <s-header-title ref="headerTitle"
                    isDisplayBack
                    title="地址填写"
                    is-fixed
                    background="#FFFFFF"
                    z-index="10"
                    @getPageHeight="getPageHeight"
    >
    </s-header-title>
    <view :style="{height:page.headerHeight + 'px'}"></view>

    <view class="mt_20 wh_702 hW_83 bg_F8F8F8 flex align-center justify-between"
          style="border-radius: 11rpx;"
          @click.stop="openCity"
          v-if="page.options.type == 1"
    >
      <view class="fs_30 fw_500 color_292929 ml_16">
        编谱地址
      </view>
      <view class="fs_30 fw_500 color_9F9F9F mr_16">
        {{ page.genealogicalInformation.area ? page.genealogicalInformation.area.split('-').join('/') : '请选择' }}
        <text class="iconfont icon-ic_rightarrow fs_26 ml_12"></text>
      </view>
    </view>
    <view class="mt_20 wh_702 hW_83 bg_F8F8F8 flex align-center justify-between"
          style="border-radius: 11rpx;"
          @click.stop="openCity"
          v-else-if="page.options.type == 2"
    >
      <view class="fs_30 fw_500 color_292929 ml_16">
        祖籍地
      </view>
      <view class="fs_30 fw_500 color_9F9F9F mr_16">
        {{ page.genealogicalInformation.ancestral_home ? page.genealogicalInformation.ancestral_home.split('-').join('/') : '请选择'
        }}
        <text class="iconfont icon-ic_rightarrow fs_26 ml_12"></text>
      </view>
    </view>
    <view class="mt_20 wh_702 hW_83 bg_F8F8F8 flex align-center justify-between"
          style="border-radius: 11rpx;"
          @click.stop="openCity"
          v-else-if="page.options.type == 3"
    >
      <view class="fs_30 fw_500 color_292929 ml_16">
        现居地
      </view>
      <view class="fs_30 fw_500 color_9F9F9F mr_16">
        {{ !!page.genealogicalInformation.current_residence ? page.genealogicalInformation.current_residence : '请选择'
        }}
        <text class="iconfont icon-ic_rightarrow fs_26 ml_12"></text>
      </view>
    </view>
    <view class="mt_20 wh_702 hW_83 bg_F8F8F8 flex align-center justify-between"
          style="border-radius: 11rpx;"
          @click.stop="openCity"
          v-else-if="page.options.type == 4"
    >
      <view class="fs_30 fw_500 color_292929 ml_16">
        墓地
      </view>
      <view class="fs_30 fw_500 color_9F9F9F mr_16">
        {{ !!page.genealogicalInformation.current_residence ? page.genealogicalInformation.current_residence : '请选择'
        }}
        <text class="iconfont icon-ic_rightarrow fs_26 ml_12"></text>
      </view>
    </view>
    <view class="mt_20 wh_702 hW_83 bg_F8F8F8 flex align-center justify-between"
          style="border-radius: 11rpx;"
          @click.stop="openCity"
          v-else-if="page.options.type == 5"
    >
      <view class="fs_30 fw_500 color_292929 ml_16">
        祖籍地
      </view>
      <view class="fs_30 fw_500 color_9F9F9F mr_16">
        {{ page.genealogicalInformation.ancestral ? page.genealogicalInformation.ancestral.split('-').join('/') : '请选择'
        }}
        <text class="iconfont icon-ic_rightarrow fs_26 ml_12"></text>
      </view>
    </view>
    <view class="mt_20 wh_702 hW_83 bg_F8F8F8 flex align-center justify-between"
          style="border-radius: 11rpx;"
          @click.stop="openCity"
          v-else-if="page.options.type == 6"
    >
      <view class="fs_30 fw_500 color_292929 ml_16">
        现居地
      </view>
      <view class="fs_30 fw_500 color_9F9F9F mr_16">
        {{ page.genealogicalInformation.current_residence ? page.genealogicalInformation.current_residence.split('-').join('/') : '请选择'
        }}
        <text class="iconfont icon-ic_rightarrow fs_26 ml_12"></text>
      </view>
    </view>
    <view class="mt_20 wh_702 hW_83 bg_F8F8F8 flex align-center justify-between"
          style="border-radius: 11rpx;"
          @click.stop="openCity"
          v-else-if="page.options.type == 7"
    >
      <view class="fs_30 fw_500 color_292929 ml_16">
        墓地
      </view>
      <view class="fs_30 fw_500 color_9F9F9F mr_16">
        {{ page.genealogicalInformation.current_residence ? page.genealogicalInformation.current_residence.split('-').join('/') : '请选择'
        }}
        <text class="iconfont icon-ic_rightarrow fs_26 ml_12"></text>
      </view>
    </view>
    <view class="mt_20 wh_702 hW_83 bg_F8F8F8 flex align-center justify-between"
          style="border-radius: 11rpx;"
          @click.stop="openCity"
          v-else
    >
      <view class="fs_30 fw_500 color_292929 ml_16">
        所属地区
      </view>
      <view class="fs_30 fw_500 color_9F9F9F mr_16">
        {{ page.genealogicalInformation.city ? page.genealogicalInformation.city.split('-').join('') : '请选择' }}
        <text class="iconfont icon-ic_rightarrow fs_26 ml_12"></text>
      </view>
    </view>

    <view class="mt_20 wh_702 bg_F8F8F8 flex flex-column"
          style="border-radius: 11rpx;"
          v-if="page.options.type == 1"
    >
      <view class="fs_30 fw_500 color_292929 ml_16 mt_17">
        详细地址
      </view>
      <view class="fs_30 fw_500 color_9F9F9F ml_16 mr_16 mt_28 mb_28 flex">
        <textarea class="fs_30 flex-sub"
                  v-model="page.genealogicalInformation.area_address"
                  placeholder="请输入详细地址..."
                  auto-height
        ></textarea>
      </view>
    </view>
    <view class="mt_20 wh_702 bg_F8F8F8 flex flex-column"
          style="border-radius: 11rpx;"
          v-else-if="page.options.type == 2"
    >
      <view class="fs_30 fw_500 color_292929 ml_16 mt_17">
        详细地址
      </view>
      <view class="fs_30 fw_500 color_9F9F9F ml_16 mr_16 mt_28 mb_28 flex">
        <textarea class="fs_30 flex-sub"
                  v-model="page.genealogicalInformation.ancestral_address"
                  placeholder="请输入详细地址..."
                  auto-height
        ></textarea>
      </view>
    </view>
    <view class="mt_20 wh_702 bg_F8F8F8 flex flex-column"
          style="border-radius: 11rpx;"
          v-else-if="page.options.type == 3"
    >
      <view class="fs_30 fw_500 color_292929 ml_16 mt_17">
        详细地址
      </view>
      <view class="fs_30 fw_500 color_9F9F9F ml_16 mr_16 mt_28 mb_28 flex">
        <textarea class="fs_30 flex-sub"
                  v-model="page.genealogicalInformation.current_residence_address"
                  placeholder="请输入详细地址..."
                  auto-height
        ></textarea>
      </view>
    </view>
    <view class="mt_20 wh_702 bg_F8F8F8 flex flex-column"
          style="border-radius: 11rpx;"
          v-else-if="page.options.type == 4"
    >
      <view class="fs_30 fw_500 color_292929 ml_16 mt_17">
        详细地址
      </view>
      <view class="fs_30 fw_500 color_9F9F9F ml_16 mr_16 mt_28 mb_28 flex">
        <textarea class="fs_30 flex-sub"
                  v-model="page.genealogicalInformation.current_residence_address"
                  placeholder="请输入详细地址..."
                  auto-height
        ></textarea>
      </view>
    </view>
    <view class="mt_20 wh_702 bg_F8F8F8 flex flex-column"
          style="border-radius: 11rpx;"
          v-else-if="page.options.type == 5"
    >
      <view class="fs_30 fw_500 color_292929 ml_16 mt_17">
        详细地址
      </view>
      <view class="fs_30 fw_500 color_9F9F9F ml_16 mr_16 mt_28 mb_28 flex">
        <textarea class="fs_30 flex-sub"
                  v-model="page.genealogicalInformation.ancestral_address"
                  placeholder="请输入详细地址..."
                  auto-height
        ></textarea>
      </view>
    </view>
    <view class="mt_20 wh_702 bg_F8F8F8 flex flex-column"
          style="border-radius: 11rpx;"
          v-else-if="page.options.type == 6"
    >
      <view class="fs_30 fw_500 color_292929 ml_16 mt_17">
        详细地址
      </view>
      <view class="fs_30 fw_500 color_9F9F9F ml_16 mr_16 mt_28 mb_28 flex">
        <textarea class="fs_30 flex-sub"
                  v-model="page.genealogicalInformation.current_residence_address"
                  placeholder="请输入详细地址..."
                  auto-height
        ></textarea>
      </view>
    </view>
    <view class="mt_20 wh_702 bg_F8F8F8 flex flex-column"
          style="border-radius: 11rpx;"
          v-else-if="page.options.type == 7"
    >
      <view class="fs_30 fw_500 color_292929 ml_16 mt_17">
        详细地址
      </view>
      <view class="fs_30 fw_500 color_9F9F9F ml_16 mr_16 mt_28 mb_28 flex">
        <textarea class="fs_30 flex-sub"
                  v-model="page.genealogicalInformation.current_residence_address"
                  placeholder="请输入详细地址..."
                  auto-height
        ></textarea>
      </view>
    </view>
    <view class="mt_20 wh_702 bg_F8F8F8 flex flex-column"
          style="border-radius: 11rpx;"
          v-else
    >
      <view class="fs_30 fw_500 color_292929 ml_16 mt_17">
        详细地址
      </view>
      <view class="fs_30 fw_500 color_9F9F9F ml_16 mr_16 mt_28 mb_28 flex">
        <textarea class="fs_30 flex-sub"
                  v-model="page.genealogicalInformation.city_address"
                  placeholder="请输入详细地址..."
                  auto-height
        ></textarea>
      </view>
    </view>


    <view class="mt_150 wh_362 hW_80 bg_FF4206 fs_30 fw_500 color_FFFFFF flex align-center justify-center"
          style="border-radius: 41rpx 41rpx 41rpx 41rpx;"
          @click.stop="save"
    >
      保存
    </view>

    <su-region-picker title="请选择地址"
                      :show="page.areaWindowDisplay"
                      @cancel="page.areaWindowDisplay = false"
                      @confirm="onRegionConfirm"
    ></su-region-picker>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';

  const page = reactive({
    headerHeight: 0,
    areaWindowDisplay: false,
    options: {},
    genealogicalInformation: {},
    addressDetail: '',
  });

  onLoad(async (options) => {
    sheep.$api.data.area().then((res) => {
      if (res.code === 1) {
        uni.setStorageSync('areaData', res.data);
      }
    });
    page.options = options;
    if (!options.type) {
      page.options.type = 0;
    } else {
      page.options.type = options.type;
    }
    await getGenealogicalInformation();
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function getGenealogicalInformation() {
    if (page.options.type == 1) {
      let { data } = await sheep.$api.book_list.index({
        genealogy_id: page.options.id,
      });
      page.genealogicalInformation = data;
    }
    else if (page.options.type == 2) {
      let { data } = await sheep.$api.family.getFamilyMemberDetail({
        member_id: page.options.id,
        is_use: 0,
      });
      page.genealogicalInformation = data;
    }
    else if (page.options.type == 3) {
      let { data } = await sheep.$api.family.getFamilyMemberDetail({
        member_id: page.options.id,
        is_use: 0,
      });
      page.genealogicalInformation = data;
    }
    else if (page.options.type == 4) {
      let { data } = await sheep.$api.family.getFamilyMemberDetail({
        member_id: page.options.id,
        is_use: 0,
      });
      page.genealogicalInformation = data;
    }
    else if (page.options.type == 5) {
      let { data } = await sheep.$api.genealogy.getGenealogyPersonal({
        id: page.options.id,
        is_use: 0,
      });
      page.genealogicalInformation = data;
    }
    else if (page.options.type == 6) {
      let { data } = await sheep.$api.genealogy.getGenealogyPersonal({
        id: page.options.id,
        is_use: 0,
      });
      page.genealogicalInformation = data;
    }
    else if (page.options.type == 7) {
      let { data } = await sheep.$api.genealogy.getGenealogyPersonal({
        id: page.options.id,
        is_use: 0,
      });
      page.genealogicalInformation = data;
    }
    else {
      let { data } = await sheep.$api.genealogy.getGenealogyInfo({
        genealogy_id: page.options.id,
      });
      page.genealogicalInformation = data;
    }
  }

  function openCity() {
    page.areaWindowDisplay = true;
  }

  async function onRegionConfirm(e) {
    // let { code, msg } = await sheep.$api.genealogy.updateGenealogyInfo({
    //   id: page.options.id,
    //   city: e.province_name + '/' + e.city_name + '/' + e.district_name,
    // });
    if (page.options.type == 1) {
      page.genealogicalInformation.area = e.province_name + '/' + e.city_name + '/' + e.district_name;
    }
    else if(page.options.type == 2){
      page.genealogicalInformation.ancestral_home = e.province_name + '/' + e.city_name + '/' + e.district_name;
    }
    else if(page.options.type == 3){
      page.genealogicalInformation.current_residence = e.province_name + '/' + e.city_name + '/' + e.district_name;
    }
    else if(page.options.type == 4){
      page.genealogicalInformation.current_residence = e.province_name + '/' + e.city_name + '/' + e.district_name;
    }
    else if(page.options.type == 5){
      page.genealogicalInformation.ancestral = e.province_name + '/' + e.city_name + '/' + e.district_name;
    }
    else if(page.options.type == 6){
      page.genealogicalInformation.current_residence = e.province_name + '/' + e.city_name + '/' + e.district_name;
    }
    else if(page.options.type == 7){
      page.genealogicalInformation.current_residence = e.province_name + '/' + e.city_name + '/' + e.district_name;
    }
    else {
      page.genealogicalInformation.city = e.province_name + '/' + e.city_name + '/' + e.district_name;
    }
    // await getGenealogicalInformation();
    page.areaWindowDisplay = false;
  }

  async function save() {
    if (page.options.type == 1) {
      if (!page.genealogicalInformation.area) {
        sheep.$helper.toast('请选择编谱地址');
        return;
      }
      const { code, msg } = await sheep.$api.book_list.updateBook({
        genealogy_id: page.options.id,
        area: page.genealogicalInformation.area,
        area_address: page.genealogicalInformation.area_address,
      });
      if (code == 1) {
        sheep.$helper.toast('修改成功');
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        sheep.$helper.toast(msg);
      }
    }
    else if (page.options.type == 2) {
      if (!page.genealogicalInformation.ancestral_home) {
        sheep.$helper.toast('请选择祖籍地');
        return;
      }
      const { code, msg } = await sheep.$api.family.updateFamilyMemberInfo({
        member_id: page.options.id,
        ancestral_home: page.genealogicalInformation.ancestral_home,
        ancestral_address: page.genealogicalInformation.ancestral_address,
      });
      if (code == 1) {
        sheep.$helper.toast('修改成功');
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        sheep.$helper.toast(msg);
      }
    }
    else if (page.options.type == 3) {
      if (!page.genealogicalInformation.current_residence) {
        sheep.$helper.toast('请选择现居地');
        return;
      }
      const { code, msg } = await sheep.$api.family.updateFamilyMemberInfo({
        member_id: page.options.id,
        current_residence: page.genealogicalInformation.current_residence,
        current_residence_address: page.genealogicalInformation.current_residence_address,
      });
      if (code == 1) {
        sheep.$helper.toast('修改成功');
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        sheep.$helper.toast(msg);
      }
    }
    else if (page.options.type == 4) {
      if (!page.genealogicalInformation.current_residence) {
        sheep.$helper.toast('请选择墓地');
        return;
      }
      const { code, msg } = await sheep.$api.family.updateFamilyMemberInfo({
        member_id: page.options.id,
        current_residence: page.genealogicalInformation.current_residence,
        current_residence_address: page.genealogicalInformation.current_residence_address,
      });
      if (code == 1) {
        sheep.$helper.toast('修改成功');
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        sheep.$helper.toast(msg);
      }
    }
    else if (page.options.type == 5) {
      if (!page.genealogicalInformation.ancestral) {
        sheep.$helper.toast('请选择祖籍地');
        return;
      }
      const { code, msg } = await sheep.$api.genealogy.updateMemberInfo({
        id: page.options.id,
        ancestral: page.genealogicalInformation.ancestral,
        ancestral_address: page.genealogicalInformation.ancestral_address,
      });
      if (code == 1) {
        sheep.$helper.toast('修改成功');
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        sheep.$helper.toast(msg);
      }
    }
    else if (page.options.type == 6) {
      if (!page.genealogicalInformation.current_residence) {
        sheep.$helper.toast('请选择现居地');
        return;
      }
      const { code, msg } = await sheep.$api.genealogy.updateMemberInfo({
        id: page.options.id,
        current_residence: page.genealogicalInformation.current_residence,
        current_residence_address: page.genealogicalInformation.current_residence_address,
      });
      if (code == 1) {
        sheep.$helper.toast('修改成功');
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        sheep.$helper.toast(msg);
      }
    }
    else if (page.options.type == 7) {
      if (!page.genealogicalInformation.current_residence) {
        sheep.$helper.toast('请选择墓地');
        return;
      }
      const { code, msg } = await sheep.$api.genealogy.updateMemberInfo({
        id: page.options.id,
        current_residence: page.genealogicalInformation.current_residence,
        current_residence_address: page.genealogicalInformation.current_residence_address,
      });
      if (code == 1) {
        sheep.$helper.toast('修改成功');
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        sheep.$helper.toast(msg);
      }
    }
    else {
      if (!page.genealogicalInformation.city) {
        sheep.$helper.toast('请选择所属地区');
        return;
      }
      let { code, msg } = await sheep.$api.genealogy.updateGenealogyInfo({
        id: page.options.id,
        city: page.genealogicalInformation.city,
        city_address: page.genealogicalInformation.city_address,
      });
      if (code == 1) {
        sheep.$helper.toast('修改成功');
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } else {
        sheep.$helper.toast(msg);
      }
    }
  }
</script>


<style scoped lang="scss">

</style>
